import {defineComponent, reactive, ref} from "vue"
import "../css/index.css"

export default defineComponent({
    props: {
        visible: {
            type: Object, default: {}
        },
        isDetail: {
            type: Boolean, default: false
        },
        closeDia: {
            type: Function, default: () => {
            }
        },
        saveDia: {
            type: Function, default: () => {
            }
        },
        handleAdd: {
            type: Function, default: () => {
            }
        },
        diaForm: {
            type: Object, default: {}
        },
        changeValue: {
            type: Function, default: () => {
            }
        },
        diaTitle:{
            type:String,
            default:""
        }

    }, setup(props) {
        const formRef = ref(null)
        const rules = reactive({
            
               id: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               order_number: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               cat_id: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               user_id: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               money: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               createdAt: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               updatedAt: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            ,
               deletedAt: [
                    {required: true, message: '请输入', trigger: 'blur'},
                ]
            
        })

        // 表单校验
        const validateForm = async () => {
            await formRef.value.validate((valid, fields) => {
                if(valid){
                    if(props.diaTitle === "新增资助订单"){
                        props.handleAdd()
                    }else{
                        props.saveDia()
                    }
                    formRef.resetFields()
                }
            })
        }
        return (props) => {
            return (
                <>
                    <el-dialog
                        v-model={props.visible.value}
                        title={props.diaTitle}
                        width={'70%'}
                        show-close>
                        <el-form
                            model={props.diaForm}
                            ref={formRef}
                            rules={rules}
                            label-width={'120px'}>
                            <el-form-item label={"id"} prop={'id'}>
                 <el-input v-model={props.diaForm.id}/>
              </el-form-item> <el-form-item label={"order_number"} prop={'order_number'}>
                 <el-input v-model={props.diaForm.order_number}/>
              </el-form-item> <el-form-item label={"cat_id"} prop={'cat_id'}>
                 <el-input v-model={props.diaForm.cat_id}/>
              </el-form-item> <el-form-item label={"user_id"} prop={'user_id'}>
                 <el-input v-model={props.diaForm.user_id}/>
              </el-form-item> <el-form-item label={"money"} prop={'money'}>
                 <el-input v-model={props.diaForm.money}/>
              </el-form-item> <el-form-item label={"createdAt"} prop={'createdAt'}>
                 <el-input v-model={props.diaForm.createdAt}/>
              </el-form-item> <el-form-item label={"updatedAt"} prop={'updatedAt'}>
                 <el-input v-model={props.diaForm.updatedAt}/>
              </el-form-item> <el-form-item label={"deletedAt"} prop={'deletedAt'}>
                 <el-input v-model={props.diaForm.deletedAt}/>
              </el-form-item>
                        </el-form>
                        <div className={"diaFooter"}>
                        <span className="dialog-footer">
                            {
                                props.isDetail ? <>
                                        <el-button onClick={props.closeDia}>关闭</el-button>
                                    </> :
                                    <>
                                        <el-button onClick={props.closeDia}>取消</el-button>
                                        <el-button
                                            type="primary"
                                            onClick={validateForm}>保存
                                        </el-button>
                                    </>
                            }

                    </span>
                        </div>
                    </el-dialog>
                </>
            )
        }
    }
})